<template>
  <!-- 卡片 -->
  <el-card shadow="hover">
    <el-form :inline="true">
    <!-- 一级分类 -->
    <el-form-item label="一级分类" prop="region"  inline="true">
      <el-select  placeholder="请选择一级分类" v-model="UseCategory.c1Id" @change="choose1" :disabled="isActive == 1   ">
        <el-option  v-for="c1 in UseCategory.c1_arr" :key="c1.id" :label="c1.name" :value="c1.id"/>
      </el-select>
    </el-form-item>

  <!-- 二级分类 -->  
    <el-form-item label="二级分类" prop="region" inline="true">
      <el-select  placeholder="请选择二级分类" v-model="UseCategory.c2Id" @change="choose2" :disabled="isActive == 1 ">
        <el-option v-for="c2 in UseCategory.c2_arr" :key="c2.id" :label="c2.name" :value="c2.id"/>
       
      </el-select>
    </el-form-item>
    
    <!-- 三级分类 -->
    <el-form-item label="三级分类" prop="region" inline="true">
      <el-select  placeholder="请选择三级分类" v-model="UseCategory.c3Id" :disabled="isActive == 1 ">
        <el-option v-for="c3 in UseCategory.c3_arr" :key="c3.id" :label="c3.name" :value="c3.id" />
      </el-select>
    </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import  { ref ,onMounted,onUnmounted} from 'vue';
// 引入仓库
import UseCategoryStore from '@/stores/category'
// 执行仓库的函数
let UseCategory = UseCategoryStore()

// props接受参数
defineProps(['isActive','isDisabled'])

// 组件挂在完毕
onMounted(()=>{
    // 通知pinia发请求
    UseCategory.getc1()
})

// 
let choose1 = ()=>{
  UseCategory.getc2()
  // 下次点击一级分类时,把二级和三级清空
  UseCategory.c2Id = ''
  UseCategory.c3Id = ''

}
// 
let choose2  = function(){
  UseCategory.getc3()
  // 下次点击二级分类时,把三级清空
  UseCategory.c3Id = ''
}

// 组件销毁阶段
onUnmounted(()=>{
    // 调用$reset方法,路由组件每次跳转之前会把数据清空
    UseCategory.$reset()
})


</script>
<script lang="ts">
export default {
  name:'Category'
}
</script>

<style scoped>

</style>